/**
 * 插件形式封装全局指令
 */

// 导入懒加载的use函数
import { useIntersectionObserver } from '@vueuse/core'
// 导入加载失败显示的默认图片
import defImg from '@/assets/images/200.png'
// 导入加载中显示的默认图片
import loadImg from '@/assets/images/loading.gif'

export default {
  install (app) {
    console.log('实例对象:', app)
    // vue3 挂载全局属性（所有组件都可以获取load）| vue2 => Vue.prototype.name = 'axios'
    app.config.globalProperties.load = loadImg
    // 定义注册全局指令(可以查询vue.js的官方文档)
    // app.directive('自定义指令名字', {逻辑})
    // 指令的作用:操作DOM
    app.directive('ilazy', {
      // 绑定元素的父组件被挂载时调用
      /**
       * 核心就是  mounted 有俩个核心参数 el 和 binding
       * @param{*} el 使用 ilazy 指令的元素
       * @param{*} binding  获取指令上绑定的值
       */
      mounted (el, binding) {
        // console.log('元素挂载了', el, binding)

        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 1.图片进入可视区  ==> 给图片赋值(src) => 下载图片并渲染显示
              el.src = binding.value
              // 2.图片加载失败处理 ==>显示一个默认的图片
              el.onerror = () => {
                el.src = defImg
              }
              // 避免每次执行,执行一次即可
              stop()
            }
          }
        )
      }
    })
  }
}
